<template>
  <!-- z-10 / z-9 为了保证激活状态的页签能够显示完整 -->
  <div
    class="relative flex-y-center h-34px px-24px cursor-pointer -mr-18px"
    :class="{ 'z-10': isActive, 'z-9': isHover }"
    @mouseenter="setHover"
    @mouseleave="unsetHover"
  >
    <div class="absolute-lb w-full h-full overflow-hidden">
      <svg-radius-bg
        class="w-full h-full"
        :is-active="isActive"
        :is-hover="isHover"
        :is-dark="theme.darkMode"
      />
    </div>
    <span
      class="relative z-2"
      :class="{ 'font-bold': isActive, 'theme-text-color': isActive || isHover }"
    >
      <slot></slot>
    </span>
    <div v-if="closable" class="pl-3px">
      <icon-close :is-primary="isActive" :primary-color="themeColor" @click="handleClose" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useBoolean } from '@/hooks'
import { useThemeStore } from '@/store'
import { toRef } from 'vue'
import { IconClose } from '../IconClose'
import { SvgRadiusBg } from './components'

interface Props {
  isActive?: boolean
  closable?: boolean
}
withDefaults(defineProps<Props>(), {
  isActive: false,
  closable: true,
})
const theme = useThemeStore()
const themeColor = toRef(theme, 'themeColor')
const emit = defineEmits<{
  (e: 'close'): void
}>()
const { bool: isHover, setTrue: setHover, setFalse: unsetHover } = useBoolean()

function handleClose(e: MouseEvent) {
  e.stopPropagation()
  emit('close')
}
</script>
<style scoped>
.theme-text-color {
  color: v-bind(themeColor);
}
</style>
